
@import '../style/mixins';
.flex{
    display:flex;
    text-align: left;
    overflow: hidden;

    &-direction{
        &-row{
            flex-direction: row;
        }
        &-row-reverse{
            flex-direction: row-reverse;
        }
        &-column{
            flex-direction: column;
        }
        &-column-reverse{
            flex-direction: column-reverse;
        }
    
    }

    &-wrap{
        flex-wrap: wrap;
    }
    &-nowrap{
        flex-wrap: nowrap;
    }
    &-wrap-reverse{
        flex-wrap: wrap-reverse;
    }

    &-justify-content{
        &-start{
            justify-content: flex-start;
        }
        &-end{
            justify-content: flex-end;
        }
        &-center{
            justify-content: center;
        }
        &-between{
            justify-content:space-between;
        }
        &-around{
            justify-content: space-around;
        }
    }

    &-align-items{
        &-start{
            align-items: flex-start;
        }
        &-end{
            align-items: flex-end;
        }
        &-center{
            align-items: center;
        }
        &-stretch{
            align-items: stretch;
        }
        &-baseline{
            align-items: baseline;
        }
    }

    &-align-content{
        &-start{
            align-content: flex-start;
        }
        &-end{
            align-content: flex-end;
        }
        &-center{
            align-content: center;
        }
        &-between{
            align-content: space-between;
        }
        &-around{
            align-content: space-around;
        }
        &-stretch{
            align-content: stretch;
        }
    }
    
    & &-item{
        box-sizing: border-box;
        flex: 1;
        margin-left: $h-spacing-md;
        min-width: 10 * $hd;

        &:first-child {
            margin-left: 0;
        }
    }
}